<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- top=50%定位到父元素50%处，top=50%定位到本元素-50%处 -->
	<!-- <h1>绝对定位垂直居中1</h1>
	<div style="width:100%;height:400px;background-color:red;position:relative;">
		<div style="width:100%;height:300px;background-color:green;position:absolute;top:50%;">
			
		</div>
	</div> -->
	<!-- <h1>绝对定位垂直居中2</h1>
	<div style="width:100%;height:400px;background-color:red;position:relative;">
		<div style="width:100%;height:300px;background-color:green;position:absolute;top:50%;">
			<div style="width:100%;height:300px;background-color:blue;position:relative;top:-50%;">
				
			</div>
		</div>
	</div> -->
	<h1>绝对定位垂直居中3需要三层div结构且left，top先偏移50%，再偏移-50%，第一层确定定位位置（设置第一层的div的position:relative;,第二层设置绝对定位将居中定位元素移到第一层元素的左下角，第三层元素设置相对定位将该元素相对自身的一半向上偏移，此时就能达到居中的效果）</h1>
	<div style="width:100%;height:400px;background-color:red;position:relative;">
		<div style="width:100%;height:300px;background-color:green;position:absolute;top:50%;left:50%;">
			<div style="width:100%;height:300px;background-color:blue;position:relative;top:-50%;left:-50%;">
				
			</div>
		</div>
	</div>
</body>
</html>